<template>
  <div class="color-select-container">
    <color-picker
      v-model:pureColor="color"
      :format="props.format"
      use-type="both"
      @update:pureColor="updatePureColor"
    />
  </div>
</template>
<script setup>
  import { ref, defineProps, defineEmits, watch, onMounted } from 'vue';
  import { ColorPicker } from 'vue3-colorpicker';
  import 'vue3-colorpicker/style.css';

  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    format: {
      type: String,
      default: 'rgb',
    },
  });

  const color = ref('');

  const emits = defineEmits(['update:modelValue']);

  const updatePureColor = (val) => {
    emits('update:modelValue', val);
  };

  onMounted(() => {
    const els = document.querySelectorAll('.color-select-container .vc-color-wrap');
    els.forEach((item) => {
      item.style.width = '100%';
    });
  });

  watch(
    () => props.modelValue,
    (val) => {
      color.value = val || 'rgba(0, 0, 0, 0)';
    },
    { immediate: true, deep: true },
  );
</script>
<style>
  .color-select-container {
    position: relative;
    height: 38px;
    padding: 2px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }

  .color-select-container .vc-color-wrap,
  .color-select-container .ant-input-affix-wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }

  .color-select-container .ant-input-affix-wrapper {
    z-index: -1;
  }

  .color-select-container .vc-color-wrap {
    width: 100% !important;
    height: 36px !important;
    border-radius: 4px;
    box-shadow: none !important;
  }
</style>
